<template>
    <view class="type-area cus-page">
        <view class="com-m-t-20 com-m-b-20 card">
            <view v-for="item in 12" :key="item"
                class="com-flex com-row-between item">
                <view class="com-flex" style="flex:1" @tap="select">
                    <view v-if="item==1" class="com-m-r-22 com-flex com-row-center default">
                        <u-icon name="checkbox-mark" color="#fff"></u-icon>
                    </view>
                    <view style="flex:1">
                        <view class="com-font-32">
                            <span class="com-font-bold com-m-r-56">李清照</span>
                            <span>18112340088</span>
                        </view>
                        <span class="com-m-t-26 com-lh-40 u-line-2">
                            四川省成都市武侯区十陵西路奎光塔街道学府路
                            286号阿坝州工商都江堰干休所花江西岭小区...
                        </span>
                    </view>
                </view>
                <view class="com-m-l-60" @tap="editAddress">
                    <u-icon name="edit-pen" size="50rpx"></u-icon>
                </view>
            </view>
        </view>
        <ct-bottom-button :buttons="buttons" @hand="handButton"/>
    </view>
</template>


<script>
import CtBottomButton from '../../components/ct-bottom-button/ct-bottom-button.vue';
export default {
    name: "addressList",
    components: {CtBottomButton},
    props: {},

    data() {
        return {
            buttons: ["添加地址"]
        };
    },

    computed: {},
    watch: {},

    mounted() {},

    methods: {
        // 选择地址
        select(){
            uni.navigateBack();
        },

        // 点击按钮添加地址
        handButton(e){
            uni.navigateTo({ url: "/pages/shopping-cart/address-add-edit" })
        },

        // 编辑地址
        editAddress(){
            uni.navigateTo({ url: "/pages/shopping-cart/address-add-edit?id=1" })
        }
    },
};
</script>


<style scoped lang='scss'>
    .card{
        background: #fff;
        padding: 0 32rpx;
        border-radius: 24rpx;
        .item{
            border-bottom: 1px solid #e2e2e2;
            padding: 30rpx 0;
            &:last-child{
                border: none;
            }
            .default{
                width: 40rpx;
                height: 40rpx;
                background: linear-gradient(-45deg, #C3B0FF, #32CCF2);
                border-radius: 50%;
            }
        }
    }
</style>